<template>
  <div>
    <ul>
      <!-- 如果不设置 key v-for 会采用就地更新策略, 尽可能复用当前的 元素 -->
      <!-- 将 key 设置为 索引, 与不设置 key 效果一样 -->
      <li v-for="item in list" :key="item.id">
        {{ item.name }}
        <input type="text" />
      </li>
    </ul>
    <button @click="add">点我加一个新来的</button>
  </div>
</template>

<script>
export default {
  name: "VuBaseApp",

  data() {
    return {
      list: [
        {
          id: 50,
          name: "老大",
        },
        {
          id: 31,
          name: "老二",
        },
        {
          id: 10,
          name: "老三",
        },
      ],
    };
  },

  mounted() {},

  methods: {
      add(){
          this.list.splice(1,0,{id:8,name:'新来的'})
      }
  },
};
</script>

<style lang="scss" scoped>
</style>